<script setup lang="ts">
import { inject, onMounted, onUnmounted, reactive, ref, watch } from 'vue';

import { ElCheck, ElClose, ElOperation } from '@vben/icons';

import {
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElIcon,
  ElInput,
  ElInputNumber,
  ElOption,
  ElPopover,
  ElRadio,
  ElRadioGroup,
  ElRow,
  ElSelect,
  ElSlider,
  ElSwitch,
} from 'element-plus';

import { SpritePanel } from '#/components/scene-editor';
import { usePublicStore } from '#/store';

const emits = defineEmits(['confirmBtnAvalible']);
const publicStore = usePublicStore();
const currentLayer = inject('currentSelectedLayer') as any;
const activeNames = ref('locationProperty');
const isOpen = ref(false);
const selectedLayer = inject('currentSelectedLayer') as any;
const isSpritePopShow = ref(false);

const iconLabelOptions = reactive({
  layer: selectedLayer.value,
  isOpen,
  layout: {
    visibility: 'visible',
    'icon-image': '',
    'icon-size': 1, // 图标大小（倍数）
    'icon-allow-overlap': true, // 允许压盖(用于解决符号与其他图层中符号重叠的问题，例如icon和text，为true时允许符号重叠)
    'icon-ignore-placement': false, // 忽略图标位置(用于解决当前图层内不同符号在不同缩放视角下碰撞冲突时的显示问题，为true时允许符号碰撞)
    'icon-anchor': 'center', // 图标锚定位置
    'icon-offset': [0, 0], // 图标偏移
    'icon-rotate': 0, // 图标旋转角度
    'symbol-placement': 'point',
    'symbol-spacing': 250, // 图标间隔（最小为1，默认为250）
  } as any,
  paint: {
    'icon-opacity': 100, // 图标透明度
  } as any,
});

const iconAnchorList = ref<Array<string>>([
  'center',
  'left',
  'right',
  'top',
  'bottom',
  'top-left',
  'top-right',
  'bottom-left',
  'bottom-right',
]);

const renderParamsReturn = () => {
  const renderParams = currentLayer.value.iconLayer;
  isOpen.value = renderParams.layout.visibility === 'visible';

  Object.keys(renderParams.layout).forEach((key: string) => {
    if (!['visibility'].includes(key)) {
      iconLabelOptions.layout[key] = renderParams.layout[key];
    }
  });
  Object.keys(renderParams.paint).forEach((key: string) => {
    iconLabelOptions.paint[key] =
      key === 'icon-opacity'
        ? renderParams.paint[key] * 100
        : renderParams.paint[key];
  });
};

const handleOpenChange = (val: boolean | number | string | undefined) => {
  if (val) emits('confirmBtnAvalible', val);
};

const handleSelectSprite = (_item: any, key: string) => {
  iconLabelOptions.layout['icon-image'] = key;
  isSpritePopShow.value = false;
};
watch(
  iconLabelOptions,
  () => {
    publicStore.setLabelOptions(iconLabelOptions);
  },
  {
    immediate: true,
    deep: true,
  },
);
watch(isOpen, () => {
  if (!isOpen.value) {
    iconLabelOptions.layout.visibility = 'none';
  }
});
onMounted(() => {
  publicStore.setLabelOptions({});
  if (currentLayer.value.iconLayer) {
    renderParamsReturn();
  } else {
    if (currentLayer.value.type === 'line') {
      iconLabelOptions.layout['symbol-placement'] = 'line';
    }
  }
  if (!isOpen.value) {
    emits('confirmBtnAvalible', false);
  }
});
onUnmounted(() => {
  emits('confirmBtnAvalible', true);
});
</script>

<template>
  <div class="all">
    <ElRow class="itemRow">
      <ElCol :span="8">
        <span class="label-style" style="font-weight: 700; line-height: 40px">
          是否开启图标标注：
        </span>
      </ElCol>
      <ElCol :span="16">
        <div>
          <ElRadioGroup
            v-model="isOpen"
            @change="handleOpenChange"
            size="large"
          >
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </div>
      </ElCol>
    </ElRow>
    <ElRow class="itemRow">
      <ElCol :span="3" style="display: flex; align-items: center">
        <span class="label-style"> 图标： </span>
      </ElCol>
      <ElCol :span="9">
        <ElInput
          v-model="iconLabelOptions.layout['icon-image']"
          placeholder="请选择图标"
          readonly
          :disabled="!isOpen"
          size="small"
        />
      </ElCol>
      <ElPopover
        placement="right"
        :width="400"
        trigger="click"
        popper-style="padding-top: 0;"
        :visible="isSpritePopShow"
      >
        <template #reference>
          <ElIcon
            size="18"
            class="sprite-icon"
            @click.stop="isSpritePopShow = !isSpritePopShow"
            title="选择图标"
          >
            <ElOperation />
          </ElIcon>
        </template>
        <SpritePanel
          @select-sprite="handleSelectSprite"
          @close-pannel="isSpritePopShow = false"
        />
      </ElPopover>
      <ElCol :offset="1" :span="4" style="display: flex; align-items: center">
        <span class="label-style"> 图标大小： </span>
      </ElCol>
      <ElCol :span="6" class="define-input-number">
        <ElInputNumber
          v-model="iconLabelOptions.layout['icon-size']"
          :min="1"
          :max="10"
          :step="1"
          controls-position="right"
          :disabled="!isOpen"
          size="small"
        />
        <div class="define-append">倍</div>
      </ElCol>
    </ElRow>
    <ElRow class="itemRow">
      <ElCol :span="4">
        <span class="label-style"> 不透明度： </span>
      </ElCol>
      <ElCol :span="20">
        <ElSlider
          v-model.number="iconLabelOptions.paint['icon-opacity']"
          show-input
          :disabled="!isOpen"
          size="small"
        />
      </ElCol>
    </ElRow>
    <ElCollapse v-model="activeNames">
      <ElCollapseItem title="位置属性" name="locationProperty">
        <ElRow class="itemRow">
          <ElCol :span="4" style="display: flex; align-items: center">
            <span class="label-style"> 允许压盖： </span>
          </ElCol>
          <ElCol :span="4">
            <ElSwitch
              v-model="iconLabelOptions.layout['icon-allow-overlap']"
              inline-prompt
              :active-icon="ElCheck"
              :inactive-icon="ElClose"
              size="default"
              :disabled="!isOpen"
            />
          </ElCol>
          <ElCol :span="4" style="display: flex; align-items: center">
            <span class="label-style"> 忽略放置： </span>
          </ElCol>
          <ElCol :span="4">
            <ElSwitch
              v-model="iconLabelOptions.layout['icon-ignore-placement']"
              inline-prompt
              :active-icon="ElCheck"
              :inactive-icon="ElClose"
              size="default"
              :disabled="!isOpen"
            />
          </ElCol>
        </ElRow>
        <ElRow
          class="itemRow"
          v-if="['line', 'fill'].includes(selectedLayer.type)"
        >
          <ElCol :span="4">
            <span class="label-style"> 放置规则： </span>
          </ElCol>
          <ElCol :span="10" style="padding-top: 2px">
            <div class="my-2 flex items-center text-sm">
              <ElRadioGroup
                v-model="iconLabelOptions.layout['symbol-placement']"
                class="ml-4"
                :disabled="!isOpen"
              >
                <ElRadio label="point">点</ElRadio>
                <ElRadio label="line">沿线</ElRadio>
                <ElRadio label="line-center">线中心</ElRadio>
              </ElRadioGroup>
            </div>
          </ElCol>
          <ElCol
            :span="3"
            :offset="1"
            v-if="iconLabelOptions.layout['symbol-placement'] === 'line'"
          >
            <span class="label-style" style="padding-top: 2px"> 间隔： </span>
          </ElCol>
          <ElCol
            :span="6"
            class="define-input-number"
            v-if="iconLabelOptions.layout['symbol-placement'] === 'line'"
          >
            <ElInputNumber
              v-model="iconLabelOptions.layout['symbol-spacing']"
              :min="1"
              :step="10"
              controls-position="right"
              :disabled="!isOpen"
            />
            <div class="define-append">px</div>
          </ElCol>
        </ElRow>
        <ElRow class="itemRow">
          <ElCol :span="4">
            <span class="label-style"> 锚定位置： </span>
          </ElCol>
          <ElCol :span="20">
            <ElSelect
              size="small"
              v-model="iconLabelOptions.layout['icon-anchor']"
              placeholder="选择图标锚定位置"
              style="width: 100%"
              :disabled="!isOpen"
            >
              <ElOption
                v-for="item in iconAnchorList"
                :key="item"
                :label="item"
                :value="item"
              />
            </ElSelect>
          </ElCol>
        </ElRow>
        <ElRow class="itemRow">
          <ElCol :span="4">
            <span class="label-style" style="padding-top: 2px">
              图标偏移：
            </span>
          </ElCol>
          <ElCol :span="2" style="display: flex; align-items: center">
            <span> X： </span>
          </ElCol>
          <ElCol :span="7" class="define-input-number">
            <ElInputNumber
              v-model="iconLabelOptions.layout['icon-offset'][0]"
              :step="1"
              controls-position="right"
              :disabled="!isOpen"
              size="small"
            />
            <div class="define-append">px</div>
          </ElCol>
          <ElCol
            :span="2"
            :offset="2"
            style="display: flex; align-items: center"
          >
            <span> Y： </span>
          </ElCol>
          <ElCol :span="7" class="define-input-number">
            <ElInputNumber
              v-model="iconLabelOptions.layout['icon-offset'][1]"
              :step="1"
              controls-position="right"
              :disabled="!isOpen"
              size="small"
            />
            <div class="define-append">px</div>
          </ElCol>
        </ElRow>
        <ElRow class="itemRow">
          <ElCol :span="4">
            <span class="label-style" style="padding-top: 2px">
              图标旋转：
            </span>
          </ElCol>
          <ElCol :span="20" style="padding-top: 2px">
            <ElInput
              v-model.number="iconLabelOptions.layout['icon-rotate']"
              placeholder="Please input"
              :disabled="!isOpen"
              size="small"
            >
              <template #append>度</template>
            </ElInput>
          </ElCol>
        </ElRow>
      </ElCollapseItem>
    </ElCollapse>
  </div>
</template>

<style lang="scss" scoped>
.all {
  width: 100%;
}

.itemRow {
  width: 100%;
  padding: 5px;
}

.el-input {
  width: 100%;
}

.label-style {
  font-size: 15px;
}

.colorInput {
  caret-color: transparent;
}

:deep(.colorInput .el-input__inner:hover) {
  cursor: pointer;
}

:deep(.el-table .el-table__cell) {
  text-align: center;
}

.legend {
  margin-top: 2px;
}

:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;

  /* 去除表格边框 */
}

:deep(.el-table--small .cell) {
  height: 25px;
}

:deep(.el-collapse-item__header) {
  font-size: 15px;
  font-weight: 600;
}

.keep-layer {
  display: flex;
  align-items: center;
  justify-content: left;
}

:deep(.el-alert) {
  --el-alert-padding: 8px 0px;

  padding: var(--el-alert-padding);
}

.sprite-icon {
  width: 20px;
  height: 26px;
  line-height: 26px;

  &:hover {
    color: #409eff;
    cursor: pointer;
  }
}

/* 自定义数字输入框append  */
.define-input-number {
  display: flex;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 8px;

  .el-input-number--mini {
    flex: 1;
  }

  :deep(.el-input__inner) {
    border: none !important;
  }
}

.define-append {
  display: inline-block;
  width: 40px;
  padding: 2px 3px 0;
  font-size: 12px;

  /* height: 32px;
  line-height: 32px; */
  color: #909399;
  text-align: center;
  background: #f5f7fa;
  border-left: none;
}
</style>
